<template>
    <section v-if="destination" class="destination">
      <h1>{{ destination.name }}</h1>
      <div class="destination-details">
        <img :src="`/images/${destination.image}`" :alt="destination.name" />
        <p>{{ destination.description }}</p>
      </div>
    </section>
    <section class="experiences">
  <h2>Top experiences in {{ destination.name }}</h2>
  <div class="cards">
    <router-link v-for="experience in destination.experiences"
        :key="experience.slug" :to="{name: 'experience.show', params: { experienceSlug: experience.slug}}">
      <ExperienceCard
        :experience="experience"
      />
    </router-link>
  </div>
</section>
  </template>
  
  <script>
    import sourceData from "@/data.json";
    import ExperienceCard from "@/views/ExperienceCard.vue";
    
    export default {
        components: {
    ExperienceCard,
  },
      computed: {
        // 目标Id
        destinationId() {
          return parseInt(this.$route.params.id);
        },
        destination() {
          return sourceData.destinations.find(
            (des) => des.id === this.destinationId
          );
        },
      },
    };
    
  </script>